import './Css/App.css';
import Tab from './Tab';
import Left from './Left';
import LoginPage from "./Login/LoginPage"
import ConnectionList from './ConnectionList';
import React, { useState, useEffect } from 'react';
import { Layout, Toast, Spin } from '@douyinfe/semi-ui';
import { Connect, Databases } from '../wailsjs/go/main/App';

function App() {
    let TabView = null;

    const { Sider } = Layout;
    const [databases, setDatabases] = useState([]);
    const [database, setDatabase] = useState('')
    const [table, setTable] = useState('')
    const [fields, setFields] = useState([])
    const [connect, setConnect] = useState(null);
    const [connectForm, setConnectForm] = useState({});
    const [spinning, setSpinning] = useState(false);
    const [reloadConnections, setReloadConnections] = useState(false);

    useEffect(() => {
        setDatabase('');
        setTable('');
        setFields([]);
    }, [databases, connect]);

    const MemoizedTab = React.memo(Tab);
    if (database && table && fields) {
        TabView = <MemoizedTab key={"data_table"} table={table} database={database} connect={connect} fields={fields} />
    }

    return (
        <Layout style={{ height: '100%', overflow: 'hidden' }}>
            <Sider style={{ backgroundColor: '#f8f8f8' }}>
                {connect ?
                    <>
                        <Left
                            databases={databases}
                            database={database}
                            table={table}
                            fields={fields}
                            connect={connect}
                            updateFields={setFields}
                            updateTable={setTable}
                            updateConnect={setConnect}
                            updateDatabase={setDatabase} />
                    </>
                    :
                    <Spin spinning={spinning} tip="连接中...">
                        <ConnectionList
                            reloadConnections={reloadConnections}
                            updateSpinning={setSpinning}
                            updateConnectForm={setConnectForm}
                            updateConnect={(connect) => {
                                setReloadConnections(true)
                                setDatabases([]);
                                Connect(connect).then((err) => {
                                    setSpinning(false)
                                    setConnect(connect);
                                    Databases().then((items) => {
                                        setDatabases(items);
                                        if (connect.connect_type == 'sqlite') {
                                            connect.database = 'sqlite_sequence';
                                        }
                                        if (connect.database) {
                                            setTimeout(() => setDatabase(connect.database), 20);
                                        }
                                    });
                                }).catch((e) => {
                                    setSpinning(false);
                                    Toast.error({ content: e });
                                });
                            }} />
                    </Spin>
                }
            </Sider>
            <Layout>{connect ? TabView : <LoginPage connectForm={connectForm} />}</Layout>
        </Layout>
    );
}

export default App;
